/* 
1.查询业务
    (1)发送ajax获取数据
    (2)渲染数据
2.删除业务
    (1)渲染删除按钮的时候添加data-id
    (2)注册委托事件： 给父元素注册事件，判断是不是点击删除按钮
    (3)获取按钮上的id
    (4)发送删除ajax
    (5)刷新列表
3.添加学员
    (1)弹出模态框
    (2)省市县三级联动
4.确认新增学员
    (1)收集表单数据
    (2)发送ajax请求
    (3)刷新列表 并 清空表单
5.编辑学员
    (1)获取按钮上的di
    (2)发送ajax获取学员详细信息
    (3)弹出模态框
    (4)把数据渲染到模态框的表单
6.确认编辑学员
    (1)收集表单数据
    (2)发送ajax请求
    (3)刷新列表 并 清空表单
*/

// 1.查询学员信息

async function getStudentList() {
    // (1)ajax获取学员数据
    const { data: res } = await axios.get('/students')
    console.log(res)
    // (2)渲染响应数据
    document.querySelector('.list').innerHTML = res.data.map(item => `
    <tr>
        <td>${item.name}</td>
        <td>${item.age}</td>
        <td>${item.gender === 0 ? '男' : '女'}</td>
        <td>第${item.group}组</td>
        <td>${item.hope_salary}</td>
        <td>${item.salary}</td>
        <td>${item.province}${item.city}${item.area}</td>
        <td>
        <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen" data-id="${item.id}"></i></a>
        <a href="javascript:;" class="text-danger"><i class="bi bi-trash" data-id="${item.id}"></i></a>
        </td>
    </tr>
    `).join('')
}

//调用函数
getStudentList()


// 声明全局变量存储编辑的id
let editId = ''

// 2. 删除学生功能
// 事件委托：给父元素注册事件, 判断是不是委托的子元素
document.querySelector('.list').addEventListener('click', async function (e) {
    // (1)判断是不是删除按钮
    if (e.target.classList.contains('bi-trash')) {
        // (2)获取id
        let id = e.target.dataset.id
        console.log(id)
        // (3)发送删除ajax (注意接口文档是路径参数)
        const { data: res } = await axios.delete(`/students/${id}`)
        console.log(res)
        Toast.info('删除成功')//提示框
        // (4)重新刷新列表
        getStudentList()
    }

    // (1)判断是不是编辑按钮
    if (e.target.classList.contains('bi-pen')) {
        //(2)获取id
        let id = e.target.dataset.id
        // 存储编辑id
        editId = id
        //(3)发送ajax获取学员详细信息: 路径参数
        const { data: res } = await axios.get(`/students/${id}`)
        console.log(res)
        //(4)将服务器返回的数据渲染到 模态框表单
        // 弹出模态框
        new bootstrap.Modal(document.querySelector('#modal')).show()
        // 设置标题
        document.querySelector('.modal-title').innerHTML = '修改学员'
        // 设置表单数据
        document.querySelector('[name="name"]').value = res.data.name
        document.querySelector('[name="age"]').value = res.data.age
        document.querySelector('[name="group"]').value = res.data.group
        document.querySelector('[name="hope_salary"]').value = res.data.hope_salary
        document.querySelector('[name="salary"]').value = res.data.salary
        if (res.data.gender) {
            document.querySelectorAll('[name="gender"]')[1].checked = true
        } else {
            document.querySelectorAll('[name="gender"]')[0].checked = true
        }

        const ps = document.querySelector('[name=province]')
        const cs = document.querySelector('[name=city]')
        const as = document.querySelector('[name=area]')
        // 获取 省数据
        const { data: res1 } = await axios.get('/api/province')
        // 渲染 省数据
        ps.innerHTML = '<option value="">--省份--</option>' + res1.data.map((item) => `<option value="${item}">${item}</option>`).join('')
        // 设置省
        ps.value = res.data.province
        // 获取 市数据
        const { data: res2 } = await axios.get('/api/city', { params: { pname: ps.value } })
        // 渲染 市数据
        cs.innerHTML = `<option value="">--城市--</option>` + res2.data.map((item) => `<option value="${item}">${item}</option>`).join('')
        // 设置市
        cs.value = res.data.city
        // 获取 县数据
        const { data: res3 } = await axios.get('/api/area', { params: { pname: ps.value, cname: cs.value } })
        // 渲染 县数据
        as.innerHTML = `<option value="">--地区--</option>` + res3.data.map((item) => `<option value="${item}">${item}</option>`).join('')
        // 设置县
        as.value = res.data.area
    }
})

// 3.添加学员
document.querySelector('#openModal').addEventListener('click', function (e) {
    // 清空编辑id
    editId = ''
    // 1.模态框弹窗
    // (1)弹出模态框
    new bootstrap.Modal(document.querySelector('#modal')).show()
    // (2)清空表单
    document.querySelector('form').reset()
    // (3)设置标题
    document.querySelector('.modal-title').innerHTML = '添加学员'
    // (4)加载省数据
    getProvince()
})

/* 省市县三级联动  : 省市县必须要依次选择
(1)加载省条件 : 点击添加学员，出现弹窗后。默认加载省
(2)加载市条件 : 用户选择了某一个省
(3)加载县条件 : 用户选择了某一个市
*/

const getProvince = async () => {
    // 获取省市县select选择框（简化后面代码）
    const ps = document.querySelector('[name=province]')
    const cs = document.querySelector('[name=city]')
    const as = document.querySelector('[name=area]')

    // (1)默认加载省
    // 获取 省数据
    const { data: res } = await axios.get('/api/province')
    // 渲染 省数据
    ps.innerHTML = '<option value="">--省份--</option>' + res.data.map((item) => `<option value="${item}">${item}</option>`).join('')
    // 省发生变化，就把市 和 县默认清空
    cs.value = ''
    as.value = ''

    //(2)加载市： 用户选择了某一个省
    ps.addEventListener('change', async () => {
        // 获取 市数据
        const { data: res } = await axios.get('/api/city', { params: { pname: ps.value } })
        // 渲染 市数据
        cs.innerHTML = `<option value="">--城市--</option>` + res.data.map((item) => `<option value="${item}">${item}</option>`).join('')
        // 市发生变化 就把 县默认情况
        as.value = ''
    })

    //(3)加载县： 用户选择了某一个市
    cs.addEventListener('change', async () => {
        // 获取 县数据
        const { data: res } = await axios.get('/api/area', { params: { pname: ps.value, cname: cs.value } })
        // 渲染 县数据
        as.innerHTML = `<option value="">--地区--</option>` + res.data.map((item) => `<option value="${item}">${item}</option>`).join('')
    })
}

/* 4.确认添加 : 发送ajax请求 */

document.querySelector('#submit').addEventListener('click', async function (e) {
    //0.表单按钮需要阻止默认跳转
    e.preventDefault()

    //(1)获取表单参数
    /* FormData有两种使用方式 
    第一种: 一般用于文件上传
        (1)先创建一个空的FormData:  let fd = new FormData()
        (2)使用append()添加参数:  fd.append('参数名',参数值)
    第二种: 一键获取form表单所有参数
        let fd = new FormData( form元素 )
        (1)参数必须是form标签,其他标签会报错。  
        (2)fd底层自动帮我们遍历form里面的每一个表单, 将name属性作为参数名,value作为参数值
    */
    let fd = new FormData(document.querySelector('#form'))
    let data = {}
    fd.forEach(function (value, key) {
        data[key] = value
    })
    console.log(data)
    /* 接口问题：有几个数据必须要转成数字，一般实际开发中前端传字符串后台接口自己处理 */
    data.age = +data.age
    data.hope_salary = +data.hope_salary
    data.salary = +data.salary
    data.gender = +data.gender
    data.group = +data.group
    //(2)ajax发送数据
    if (editId) {//编辑
        const { data: res } = await axios.put(`/students/${editId}`, data)
        console.log(res)
        // 提示框
        Toast.success('修改成功')
    } else {
        const { data: res } = await axios.post('/students', data)
        console.log(res)
        // 提示框
        Toast.success('添加成功')
    }

    // 刷新列表
    getStudentList()
    // 清空表单 
    document.querySelector("#form").reset()
    // 隐藏模态框(触发关闭按钮点击事件)
    document.querySelector("#modal .btn-close").click()

})